﻿<!DOCTYPE html>

<!-- $Id: index.html 73 2012-03-12 13:08:27Z azbitnev@gmail.com $ -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>

<link href="../../css/basics.css" rel="stylesheet" type="text/css"/>
<link href="../../css/960c12.css" rel="stylesheet" type="text/css"/>
<link href="../../css/style.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 10]><link href="../../css/ie.css" rel="stylesheet" type="text/css"/><![endif]-->

<script type="text/javascript" charset="utf-8" src="../../jquery/1.7.1.js"></script> 

<title>jquery.ajp.starating - examples</title>

<link href="../../source/css/release/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<link href="../../source/css/release/theme/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="../../source/release/jquery.ajp.js"></script> 

<style>

body { margin: 1em; }

</style>

<script>

$(document).ready(function () {

	function getRating(el) {
		return parseFloat( $(el).parents('tr:eq(0)').children('td:eq(2)').text() )
	}

	$('.rating').ajp$starating({
		rating: getRating,
		image: function (rate, el) {
			return '../../source/css/release/theme/images/jquery.ajp.starating.' + (rate >= 4 ? 'green' : (rate < 3 ? 'red' : 'yellow')) + '.png'
		},
		onchange: function (value, el) {
			$(el).parents('tr:eq(0)').children('td:eq(2)').text(value.toFixed(1))
		}
	})

	$('.vote').ajp$starating({
		image: '../../source/css/release/theme/images/jquery.ajp.starating.yellow.png',
		voteHandler: function (vote, star) {
			$(star).parent().ajp$staratingContext().set(vote)
		}
	})
})

</script>

</head>

<body>

	<table class="soft">
		<tr>
			<th>plugin</th>
			<th colspan="2">rating</th>
		</tr>
		<tr>
			<td>jquery.ajp.autocomplete</td>
			<td><div class="rating"></div></td>
			<td>5.0</td>
		</tr>
		<tr>
			<td>jquery.ajp.scrollable</td>
			<td><div class="rating"></div></td>
			<td>4.8</td>
		</tr>
		<tr>
			<td>jquery.ajp.paginator</td>
			<td><div class="rating"></div></td>
			<td>4.4</td>
		</tr>
		<tr>
			<td>jquery.ajp.starating</td>
			<td><div class="rating"></div></td>
			<td>3.9</td>
		</tr>
		<tr>
			<td>jquery.ajp.placeholder</td>
			<td><div class="rating"></div></td>
			<td>3.0</td>
		</tr>
		<tr>
			<td>jquery.ajp.customcheckbox</td>
			<td><div class="rating"></div></td>
			<td>2.5</td>
		</tr>
		<tr>
			<td>jquery.ajp.resizable</td>
			<td><div class="rating"></div></td>
			<td>2.0</td>
		</tr>
	</table>

	<br/>
	<span class="left float">Your vote:</span> <div class="vote left float"></div>

</body>